<template>
  <div class="app-container">
    <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="150px" class="demo-ruleForm">
      <el-form-item label="送教学生" prop="studentId">
        <el-select v-model="ruleForm.studentId" filterable placeholder="请选择送教学生">
          <el-option v-for="item in studentOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="送教老师" prop="teacherId">
        <el-select v-model="ruleForm.teacherId" filterable placeholder="请选择送教老师">
          <el-option v-for="item in teacherOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="所属学期" prop="schoolTermId">
        <el-select v-model="ruleForm.schoolTermId" placeholder="请选择学期">
          <el-option v-for="item in termOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="送教次数" prop="totalNum">
        <el-input v-model="ruleForm.totalNum" style="width: 200px;" disabled />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="submitForm('ruleForm')"
        >保存</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getAllTerm, getStudentList, getTeacher } from '@/api/basic'
import { addTask } from '@/api/task'
export default {
  data() {
    return {
      termOptions: [],
      teacherOptions: [],
      studentOptions: [],
      ruleForm: {
        schoolTermId: '',
        teacherId: '',
        studentId: '',
        totalNum: 20
      },
      rules: {
        schoolTermId: [
          { required: true, message: '请选择学期', trigger: 'change' }
        ],
        teacherId: [
          { required: true, message: '请选择送教老师', trigger: 'change' }
        ],
        studentId: [
          { required: true, message: '请选择送教学生', trigger: 'change' }
        ]
      }
    }
  },
  watch: {
    'ruleForm.yearId'(val) {
      // this.ruleForm.schoolYearName = this.schoolYearOptions.filter(v => v.value === val)[0].label
    },
    'ruleForm.studentId'(val) {
      // const item = this.studentOptions.filter(v => v.value === val)[0]
      // this.ruleForm.studentName = item.name
      // this.ruleForm.studentClass = item.classes
    },
    'ruleForm.teacherId'(val) {
      // this.ruleForm.teacherName = this.teacherOptions.filter(v => v.value === val)[0].label
    }
  },
  mounted() {
    const { name } = this.$route
    if (name === 'send-add') {
      this.getTeacherList()
      this.getStudentList()
      this.getTermList()
    }
  },
  methods: {
    submitForm(formName) {
      const that = this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const params = JSON.parse(JSON.stringify(that.ruleForm))
          params.schoolId = 1
          addTask(params).then((res) => {
            if (res) {
              that.$message({
                message: `${this.$route.name === 'send-edit' ? '编辑' : '新增'}送教任务成功！`,
                type: 'success'
              })
              that.$router.push('/task/send')
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    async getTeacherList() {
      try {
        const res = await getTeacher({
          pageNum: 1,
          pageSize: 1000
        })
        if (res && res.list && res.list.length) {
          this.teacherOptions = res.list.map(v => ({
            label: v.teacherName,
            value: v.id
          }))
        }
      } catch (err) {
        console.log(err)
      }
    },
    async getStudentList() {
      try {
        const res = await getStudentList({
          pageNum: 1,
          pageSize: 1000,
          isConsentOutwork: 1
        })
        if (res && res.list && res.list.length) {
          this.studentOptions = res.list.map(v => ({
            label: `${v.studentName}（${v.grade}年级${v.classes}班）`,
            value: v.id,
            name: v.studentName,
            classes: `${v.grade}${v.classes}`
          }))
        }
      } catch (err) {
        console.log(err)
      }
    },
    async getTermList() {
      try {
        const res = await getAllTerm({})
        if (res && res.length) {
          this.termOptions = res.map(v => ({
            label: v.name,
            value: v.id
          }))
          this.ruleForm.schoolTermId = res[0].id
        }
      } catch (err) {
        console.log(err)
      }
    }
  }
}
</script>
<style scoped lang="less">
  .app-container {
    background: #fff;
    overflow: auto;
  }
</style>
